import _ from "lodash"
import VJsonContext from "../../runtime/VJsonContext"
import Designer from "../../studio/design/Designer"
import eventBus from "../../studio/event-bus"
import {renderIcon} from "./webutils"
import {getDesignCmp} from '../../runtime/CmpStore'
import {calcClass, calcStyle, calcStyleAndWidth,calcStyleLabel,calcStyleContent} from "./webutils"

export default {
    props: {
        vjson: Object as any,
        designer: Designer,
        vcxt: VJsonContext,
        parentComponent: {type: Object as any, required: false},
        parentList: {type: Array, required: false},
        indexOfParentList: {type: Number, required: false},
    },
    watch: {
        'vjson.reference': {
            immediate: true,
            handler(newVal, oldVal) {
                if (oldVal) {
                    // 删除旧名称
                    delete this.vcxt.refs[oldVal]
                }

                if (newVal) {
                    this.vcxt.refs[newVal] = this
                }
            }
        }
    },
    created() {
        // console.log('created ', this.vjson.xtype, toRaw(this.vjson), toRaw(this.vcxt))
    },
    computed: {
        calcClass() {
            return calcClass(this.vjson)
        },

        calcStyleAndWidth() {
            return calcStyleAndWidth(this.vjson)
        },

        calcStyle() {
            return calcStyle(this.vjson)
        },

        customClass() {
            return this.vjson.cls ?? ''
        },
        calcStyleLabel(){
            return calcStyleLabel(this.vjson)
        },
        calcStyleContent(){
            return calcStyleContent(this.vjson)
        }
    },
    methods: {
        renderIcon: renderIcon,
        getDesignCmp,
        _scrollMe() {
            eventBus.$emit('bem-refresh', {sender: this, source: 'scroll'})
        },
        _selectMe(evt) {
            if (this.vjson.id) {
                if (evt.ctrlKey) {
                    // 按住 ctrl 键进行多选
                    const idx = _.findIndex(this.designer.mulSelect, v => v.vjson.id === this.vjson.id)
                    if (idx < 0) {
                        // console.log('_selectMe mulSelect.push:', this.vjson.id)
                        this.designer.mulSelect.push({
                            vjson: this.vjson,
                        })
                    }
                } else {
                    // 没按 ctrl 进行单选
                    // console.log('_selectMe mulSelect:', this.vjson.id)
                    this.designer.mulSelect = [{
                        vjson: this.vjson,
                    }]
                }
            }
            this.designer.setSelected(this.vjson, {
                parentComponent: this.parentComponent,
                parentList: this.parentList,
                indexOfParentList: this.indexOfParentList,
            })
        },
        _onDragAdd(evt, subList, parentComponent) {
            const newIndex = evt.newIndex
            if (!!subList[newIndex]) {
                this.designer.setSelected(subList[newIndex], {
                    parentComponent: parentComponent,
                    parentList: subList,
                    indexOfParentList: newIndex,
                })

            } else {
                this.designer.clearSelected()
            }

            this.designer.emitHistoryChange()
        },
        _onDragUpdate() {
            eventBus.$emit('bem-refresh', {sender: this, source: 'dragUpdate'})
            this.designer.emitHistoryChange()
        },

        _checkMove(evt) {
            return this.designer.checkWidgetMove(evt)
        },

        _onDragEnd() {
            this.designer.dragEnd()
        },
    }
}